<template>
  <div class="menu_panel p2p_user_manage">
    <div class="border">
      <div class="tabs_panel">
        <ul class="tabs_list">
          <li>
            <a @click="activeTab = 'willDeal'" :class="{'active': activeTab === 'willDeal'}" href="javascript:void(0);">
              {{ $t('service.userManage.statusFilter.willDeal') }}
              <!--待处理-->
            </a>
          </li>
          <li>
            <a @click="activeTab = 'processed'" :class="{'active': activeTab === 'processed'}" href="javascript:void(0);">
              {{ $t('salesManage.processed') }}
              <!--已处理-->
            </a>
          </li>
          <li>
            <a @click="activeTab = 'achieved'" :class="{'active': activeTab === 'achieved'}" href="javascript:void(0);">
              {{ $t('salesManage.achieved') }}
              <!--已达成-->
            </a>
          </li>
          <li>
            <a @click="activeTab = 'expired'" :class="{'active': activeTab === 'expired'}" href="javascript:void(0);">
              {{ $t('salesManage.expired') }}
              <!--已失效-->
            </a>
          </li>
        </ul>
        <div>
          <el-button @click="willExport = true" icon="el-icon-download" type="primary"  v-if="activeTab === 'achieved'">{{$t('accountManage.exportExcel')}}</el-button>
        </div>
      </div>

      <div class="data_list_panel">
        <!-- 待处理 -->
        <will-deal :active-tab="activeTab" v-if="activeTab === 'willDeal'"></will-deal>
        <!-- 已处理 -->
        <processed :active-tab="activeTab" v-if="activeTab === 'processed'"></processed>
        <!-- 已达成 -->
        <achieved :active-tab="activeTab" v-if="activeTab === 'achieved'"  :will-export="willExport"  @search="hasSearch" @updateWillExport="updateWillExport"></achieved>
        <!-- 已失效 -->
        <expired :active-tab="activeTab" v-if="activeTab === 'expired'"></expired>
      </div>
    </div>
  </div>
</template>

<script>
import WillDeal from './will-deal';
import Processed from "./processed";
import Achieved from "./achieved";
import Expired from "./expired";

import storage from "@/libs/storage";
import { apiConf } from "@/config/";
import urlType from '@/api/url-type';
import urlUtils from '@/libs/urlutils';

let that = null;
export default {
  name: "finishedwork",
  components: {
    WillDeal,
    Processed,
    Achieved,
    Expired
  },
  data() {
    return {
      activeTab: "willDeal",
      form:{},
      willExport:false,
    };
  },
  watch: {
    activeTab(val) {
      this.$store.state.app.search.show = false;
    }
  },
  methods:{
    updateWillExport() {
        if (this.willExport) {
          this.willExport = false;
        }
      },
    hasSearch(form) {
        this.form = Object.assign({}, form);
        if (this.willExport) {
          this.willExport = false;
          this.exportExcel();
        }
      },
    exportExcel() {
      if (
        !this.form.phone &&
        !this.form.realName &&
        !this.form.batchCode &&!this.form.distributionTimeStart && !this.form.distributionTimeEnd&&!this.form.agreeTimeStart &&
        !this.form.agreeTimeEnd &&!this.form.salesmanName && !this.form.salesmanGroupName
      ) {
        this.$message.error(this.$t('accountManage.plsCheckFilter'));
        return;
      }
      const param = Object.assign({},this.form);
      const user = storage.get('user');
      const language = storage.getLocal('language');
      param.token = user.token;
      param.language = language;
      let url =
        apiConf.baseUrl + urlType.telSales.exportAgreeUserList;
      url = urlUtils.fillParams(param, url, ['page']);
      window.open(url);
    },
  },
  created(){
    if(this.$route.query.activeTab){
      this.activeTab=this.$route.query.activeTab;
    }
  }
};
</script>

<style lang="scss" scoped>
.userInfo {
  background-color: #fff;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: bold;
}
.el-table__body {
  table-layout: auto !important;
}
</style>

<style lang="scss">
[data-page="finished-work-order"] {
  .el-table .cell,
  .el-table th > .cell {
    word-break: keep-all;
    word-wrap: break-word;
  }
  .el-col-24.el-col.leftTitle {
    width: 40%;
    word-break: keep-all;
    word-wrap: break-word;
  }
  .el-col-24.el-col.rightContent {
    width: 60%;
  }
  .el-table__row .cell {
    word-break: keep-all;
    word-wrap: break-word;
  }
  .line {
    word-break: break-all;
  }
  .el-row .el-col {
    word-break: break-all;
  }
}
</style>
